<template>
  <el-container style="flex-direction: column;">
    <!-- 引入顶部导航栏 -->
    <OwnerHeader :userInfo="userInfo" />

    <!-- 操作栏：搜索功能 -->
    <div class="section operation-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="searchKeyword" placeholder="请输入公告标题或内容" clearable />
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 公告列表 -->
    <div class="section announcements-section">
      <el-row :gutter="20">
        <el-col v-for="announcement in announcements.rows" :key="announcement.id" :span="24">
          <el-card class="announcement-card">
            <div class="announcement-header">
              <h3>{{ announcement.announcementTitle }}</h3>
              <span class="publish-time">{{ announcement.updateTime.replace('T', ' ') }}</span>
            </div>
            <div class="announcement-content">
              <p v-if="!announcement.isExpanded">{{ announcement.announcementContent
                .substring(0, 100) }}...</p>
              <p v-else>{{ announcement.announcementContent }}</p>
              <el-button type="text" @click="toggleExpand(announcement)">
                {{ announcement.isExpanded ? '收起' : '展开' }}
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <el-pagination v-model="currentPage" :page-size="pageSize" :total="announcements.total"
        :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper"
        @current-change="handlePageChange" @size-change="handlePageSizeChange" />
    </div>
  </el-container>
</template>

<script>
import OwnerHeader from '@/components/owner_components/OwnerHeader.vue';
import { parseJwt } from '@/utils/parseJWT';
import service from '@/utils/request';


export default {
  name: 'OwnerAnnouncementsView',
  components: {
    OwnerHeader,
  },
  data() {
    return {
      userInfo: {},

      searchKeyword: '', // 搜索关键词
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示数量
      announcements: [],
    };
  },
  mounted() {
    this.userInfo = parseJwt(localStorage.getItem('token')).payload;
    this.getAnnouncements();
  },
  methods: {
    // 获取公告数据
    getAnnouncements() {
      service.get('/api/user/announcement/getAnnouncements', {
        params: {
          page: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.searchKeyword
        }
      })
        .then(result => {
          result = result.data;
          if (result.code == 1) {
            this.announcements = result.data;
            console.log('公告信息:', this.announcements);
          } else {
            alert(result.msg);
          }
        });
    },
    // 搜索公告
    handleSearch() {
      this.getAnnouncements();
      this.currentPage = 1; // 搜索后重置到第一页
    },
    // 分页变化
    handlePageChange(page) {
      this.currentPage = page;
      this.getAnnouncements();
    },
    // 每页显示条数变化
    handlePageSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1; // 重置到第一页
      this.getAnnouncements();
    },
    // 展开/收起公告内容
    toggleExpand(announcement) {
      announcement.isExpanded = !announcement.isExpanded;
    },
  },
};
</script>

<style scoped>
.section {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.operation-section {
  background-color: #f5f7fa;
}

.announcements-section {
  background-color: #ffffff;
}

.announcement-card {
  margin-bottom: 20px;
  cursor: pointer;
}

.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.announcement-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.publish-time {
  font-size: 14px;
  color: #909399;
}

.announcement-content {
  font-size: 14px;
  color: #606266;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>